<keira-top-bar [handler]="handlerService"></keira-top-bar>

<div class="container-fluid">
  <span *ngIf="editorService.loading">Loading...</span>

  <div *ngIf="editorService.form && !!editorService.loadedEntityId && !editorService.loading">
    <div class="content-block">
      <keira-query-output
        [docUrl]="docUrl"
        [editorService]="editorService"
        (executeQuery)="editorService.save($event)"
      ></keira-query-output>
    </div>

    <form [formGroup]="editorService.form" class="form-group edit-form">
      <div class="content-block">
        <span class="category-title">Base</span>
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="entry">entry</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The unique ID of the creature'"></i>
            <input [formControlName]="'entry'" id="entry" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="name">name</label>
            <input [formControlName]="'name'" id="name" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="subname">subname</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The subname of the creature that appears in <> below the creature name'"
            ></i>
            <input [formControlName]="'subname'" id="subname" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="IconName">IconName</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.IconName"
              [config]="{ options: CREATURE_ICON, name: 'IconName' }"
              [modalClass]="'modal-xl'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'IconName'" id="IconName" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="minlevel">minlevel</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The creature level will be in the range [minlevel, maxlevel]'"
            ></i>
            <input [formControlName]="'minlevel'" id="minlevel" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="maxlevel">maxlevel</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The creature level will be in the range [minlevel, maxlevel]'"
            ></i>
            <input [formControlName]="'maxlevel'" id="maxlevel" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="exp">exp</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.exp"
              [config]="{ options: EXPANSION, name: 'exp' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'exp'" id="exp" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="faction">faction</label>
            <keira-faction-selector-btn
              [config]="{ name: 'faction' }"
              [control]="editorService.form.controls.faction"
            ></keira-faction-selector-btn>
            <input [formControlName]="'faction'" id="faction" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="npcflag">npcflag</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.npcflag"
              [config]="{ flags: NPC_FLAGS, name: 'npcflag' }"
            ></keira-flags-selector-btn>
            <input [formControlName]="'npcflag'" id="npcflag" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="rank">rank</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.rank"
              [config]="{ options: RANK, name: 'rank' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>

            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="
                'If you want the creature to show a skull or “??” in the portrait (often with Bosses), you have to enable BOSS_MOB in type_flags'
              "
            ></i>
            <input [formControlName]="'rank'" id="rank" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="family">family</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.family"
              [config]="{ options: CREATURE_FAMILY, name: 'family' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'family'" id="family" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="type">type</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.type"
              [config]="{ options: CREATURE_TYPE, name: 'type' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'type'" id="type" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="type_flags">type_flags</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.type_flags"
              [config]="{ flags: CREATURE_TYPE_FLAGS, name: 'type_flags' }"
            ></keira-flags-selector-btn>
            <input [formControlName]="'type_flags'" id="type_flags" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="unit_class">unit_class</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.unit_class"
              [config]="{ options: UNIT_CLASS, name: 'unit_class' }"
              [modalClass]="'modal-lg'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'unit_class'" id="unit_class" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="unit_flags">unit_flags</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.unit_flags"
              [config]="{ flags: UNIT_FLAGS, name: 'unit_flags' }"
            ></keira-flags-selector-btn>
            <input [formControlName]="'unit_flags'" id="unit_flags" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="unit_flags2">unit_flags2</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.unit_flags2"
              [config]="{ flags: UNIT_FLAGS_2, name: 'unit_flags2' }"
            ></keira-flags-selector-btn>
            <input [formControlName]="'unit_flags2'" id="unit_flags2" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="dynamicflags">dynamicflags</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.dynamicflags"
              [config]="{ flags: DYNAMIC_FLAGS, name: 'dynamicflags' }"
            ></keira-flags-selector-btn>
            <input [formControlName]="'dynamicflags'" id="dynamicflags" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="RegenHealth">RegenHealth</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Boolean (1 or 0) controlling whether the creature should regenerate its health or not.'"
            ></i>
            <input [formControlName]="'RegenHealth'" id="RegenHealth" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="mechanic_immune_mask">mechanic_I_M</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.mechanic_immune_mask"
              [config]="{ flags: MECHANIC_IMMUNE_MASK, name: 'mechanic_immune_mask' }"
            ></keira-flags-selector-btn>
            <input
              [formControlName]="'mechanic_immune_mask'"
              id="mechanic_immune_mask"
              type="number"
              class="form-control form-control-sm"
            />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="spell_school_immune_mask">spell_school_I_M</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.spell_school_immune_mask"
              [config]="{ flags: SPELL_SCHOOL_IMMUNE_MASK, name: 'spell_school_immune_mask' }"
            ></keira-flags-selector-btn>
            <input
              [formControlName]="'spell_school_immune_mask'"
              id="spell_school_immune_mask"
              type="number"
              class="form-control form-control-sm"
            />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="flags_extra">flags_extra</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.flags_extra"
              [config]="{ flags: FLAGS_EXTRA, name: 'flags_extra' }"
            ></keira-flags-selector-btn>
            <input [formControlName]="'flags_extra'" id="flags_extra" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="VehicleId">VehicleId</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="VEHICLE_ID_TOOLTIP"></i>
            <input [formControlName]="'VehicleId'" id="VehicleId" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="RacialLeader">RacialLeader</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Boolean (1 or 0) indicating whether the creature is a racial leader or not.'"
            ></i>
            <input [formControlName]="'RacialLeader'" id="RacialLeader" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="PetSpellDataId">PetSpellDataId</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'ID, found in CreatureSpellData.dbc, that displays what spells the pet has in the client.'"
            ></i>
            <input [formControlName]="'PetSpellDataId'" id="PetSpellDataId" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      </div>

      <div class="content-block">
        <div class="row">
          <div class="col-12 col-xl-4">
            <span class="category-title">KillCredits</span>
            <div class="row">
              <div *ngFor="let i of [1, 2]" class="form-group col-12 col-sm-6 col-md-6 col-lg-3 col-xl-6">
                <label class="control-label" for="KillCredit{{ i }}">KillCredit{{ i }}</label>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="'Can be a link to the first entry of the creature that could be killed to give quest credit'"
                ></i>
                <input [formControlName]="'KillCredit' + i" id="KillCredit{{ i }}" type="number" class="form-control form-control-sm" />
              </div>
            </div>
          </div>

          <div class="col-12 col-xl-8">
            <span class="category-title">
              Models <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="MODEL_ID_TOOLTIP"></i>
            </span>
            <div class="row">
              <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3">
                <label class="control-label" for="modelid1">modelid1</label>
                <input [formControlName]="'modelid1'" id="modelid1" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3">
                <label class="control-label" for="modelid2">modelid2</label>
                <input [formControlName]="'modelid2'" id="modelid2" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3">
                <label class="control-label" for="modelid3">modelid3</label>
                <input [formControlName]="'modelid3'" id="modelid3" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3">
                <label class="control-label" for="modelid4">modelid4</label>
                <input [formControlName]="'modelid4'" id="modelid4" type="number" class="form-control form-control-sm" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="content-block">
        <div class="row">
          <div class="col-12 col-xl-4">
            <span class="category-title">Money Loot</span>
            <div class="row">
              <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3 col-xl-6">
                <label class="control-label" for="mingold">mingold</label>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="'Minimum money that the creature drops when killed, in copper.'"
                ></i>
                <input [formControlName]="'mingold'" id="mingold" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3 col-xl-6">
                <label class="control-label" for="maxgold">maxgold</label>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="'Maximum money that the creature drops when killed, in copper.'"
                ></i>
                <input [formControlName]="'maxgold'" id="maxgold" type="number" class="form-control form-control-sm" />
              </div>
            </div>
          </div>

          <div class="col-12 col-xl-8">
            <span class="category-title">Trainer</span>
            <div class="row">
              <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3">
                <label class="control-label" for="trainer_type">trainer_type</label>
                <keira-single-value-selector-btn
                  [control]="editorService.form.controls.trainer_type"
                  [config]="{ options: TRAINER_TYPE, name: 'trainer_type' }"
                  [modalClass]="'modal-md'"
                ></keira-single-value-selector-btn>
                <input [formControlName]="'trainer_type'" id="trainer_type" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3">
                <label class="control-label" for="trainer_spell">trainer_spell</label>
                <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="TRAINER_SPELL_TOOLTIP"></i>
                <keira-spell-selector-btn
                  [control]="editorService.form.controls.trainer_spell"
                  [config]="{ name: 'trainer_spell' }"
                  [modalClass]="'modal-lg'"
                ></keira-spell-selector-btn>
                <input [formControlName]="'trainer_spell'" id="trainer_spell" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3">
                <label class="control-label" for="trainer_class">trainer_class</label>
                <keira-single-value-selector-btn
                  [control]="editorService.form.controls.trainer_class"
                  [config]="{ options: CREATURE_CLASS, name: 'trainer_class' }"
                  [modalClass]="'modal-md'"
                ></keira-single-value-selector-btn>
                <input [formControlName]="'trainer_class'" id="trainer_class" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3">
                <label class="control-label" for="trainer_race">trainer_race</label>
                <keira-single-value-selector-btn
                  [control]="editorService.form.controls.trainer_race"
                  [config]="{ options: CREATURE_RACE, name: 'trainer_race' }"
                  [modalClass]="'modal-md'"
                ></keira-single-value-selector-btn>
                <input [formControlName]="'trainer_race'" id="trainer_race" type="number" class="form-control form-control-sm" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="content-block">
        <div class="row">
          <div class="col-12 col-xl-6">
            <span class="category-title">Loots</span>
            <div class="row">
              <div class="form-group col-12 col-sm-6 col-md-4">
                <label class="control-label" for="lootid">lootid</label>
                <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'Link to creature_loot_template.entry'"></i>
                <input [formControlName]="'lootid'" id="lootid" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-6 col-md-4">
                <label class="control-label" for="pickpocketloot">pickpocketloot</label>
                <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'Link to pickpocketing_loot_template.entry'"></i>
                <input [formControlName]="'pickpocketloot'" id="pickpocketloot" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-6 col-md-4">
                <label class="control-label" for="skinloot">skinloot</label>
                <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'Link to skinning_loot_template.entry'"></i>
                <input [formControlName]="'skinloot'" id="skinloot" type="number" class="form-control form-control-sm" />
              </div>
            </div>
          </div>

          <div class="col-12 col-xl-6">
            <span class="category-title">Difficulty Entries</span>
            <div class="row">
              <div class="form-group col-12 col-sm-6 col-md-4">
                <label class="control-label" for="difficulty_entry_1">difficulty_entry_1</label>
                <keira-creature-selector-btn
                  [control]="editorService.form.controls.difficulty_entry_1"
                  [config]="{ name: 'difficulty_entry_1' }"
                ></keira-creature-selector-btn>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="'Entry of the equivalent creature in Heroic Dungeon or 25man Normal Raid'"
                ></i>
                <input
                  [formControlName]="'difficulty_entry_1'"
                  id="difficulty_entry_1"
                  type="number"
                  class="form-control form-control-sm"
                />
              </div>
              <div class="form-group col-12 col-sm-6 col-md-4">
                <label class="control-label" for="difficulty_entry_2">difficulty_entry_2</label>
                <keira-creature-selector-btn
                  [control]="editorService.form.controls.difficulty_entry_2"
                  [config]="{ name: 'difficulty_entry_2' }"
                ></keira-creature-selector-btn>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="'Entry of the equivalent creature in 10man Heroic Raid'"
                ></i>
                <input
                  [formControlName]="'difficulty_entry_2'"
                  id="difficulty_entry_2"
                  type="number"
                  class="form-control form-control-sm"
                />
              </div>
              <div class="form-group col-12 col-sm-6 col-md-4">
                <label class="control-label" for="difficulty_entry_3">difficulty_entry_3</label>
                <keira-creature-selector-btn
                  [control]="editorService.form.controls.difficulty_entry_3"
                  [config]="{ name: 'difficulty_entry_3' }"
                ></keira-creature-selector-btn>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="'Entry of the equivalent creature in 25man Heroic Raid'"
                ></i>
                <input
                  [formControlName]="'difficulty_entry_3'"
                  id="difficulty_entry_3"
                  type="number"
                  class="form-control form-control-sm"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="content-block">
        <span class="category-title">Damage</span>
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-4 col-xl-2">
            <label class="control-label" for="BaseVariance">BaseVariance</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'TODO'"></i>
            <input [formControlName]="'BaseVariance'" id="BaseVariance" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-xl-2">
            <label class="control-label" for="RangeVariance">RangeVariance</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'TODO'"></i>
            <input [formControlName]="'RangeVariance'" id="RangeVariance" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-xl-2">
            <label class="control-label" for="dmgschool">dmgschool</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.dmgschool"
              [config]="{ options: DAMAGE_TYPE, name: 'dmgschool' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'dmgschool'" id="dmgschool" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-xl-2">
            <label class="control-label" for="BaseAttackTime">BaseAttackTime</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Base time (milliseconds) that determines how long a creature must wait between melee attacks.'"
            ></i>
            <input [formControlName]="'BaseAttackTime'" id="BaseAttackTime" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-xl-2">
            <label class="control-label" for="RangeAttackTime">RangeAttackTime</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Base time (milliseconds) that determines how long a creature must wait between ranged attacks.'"
            ></i>
            <input [formControlName]="'RangeAttackTime'" id="RangeAttackTime" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      </div>

      <div class="content-block">
        <span class="category-title">Behaviour</span>
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="AIName">AIName</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.AIName"
              [config]="{ options: CREATURE_AI_NAME, name: 'AIName' }"
              [modalClass]="'modal-lg'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'AIName'" id="AIName" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="ScriptName">ScriptName</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Overrides AIName. The name of the C++ script that this creature uses, if any.'"
            ></i>
            <input [formControlName]="'ScriptName'" id="ScriptName" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="gossip_menu_id">gossip_menu_id</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'Linked to gossip_menu.entry'"></i>
            <input [formControlName]="'gossip_menu_id'" id="gossip_menu_id" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="MovementType">MovementType</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.MovementType"
              [config]="{ options: MOVEMENT_TYPE, name: 'MovementType' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'MovementType'" id="MovementType" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="movementId">movementId</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'It looks like this field is passed directly to the client and there is no info about it'"
            ></i>
            <input [formControlName]="'movementId'" id="movementId" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="InhabitType">InhabitType</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.InhabitType"
              [config]="{ flags: INHABIT_TYPE, name: 'InhabitType' }"
            ></keira-flags-selector-btn>
            <input [formControlName]="'InhabitType'" id="InhabitType" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="HoverHeight">HoverHeight</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Distance above the ground that the creature will hover if it has MOVEMENTFLAG_DISABLE_GRAVITY enabled'"
            ></i>
            <input [formControlName]="'HoverHeight'" id="HoverHeight" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      </div>

      <div class="content-block">
        <span class="category-title">Modifiers</span>
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="scale">scale</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Size multiplier (how big the creature model appears). If 0, it uses the DBC default model size.'"
            ></i>
            <input [formControlName]="'scale'" id="scale" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="DamageModifier">DamageModifier</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'Damage multiplier, affects mindmg and maxdmg'"></i>
            <input [formControlName]="'DamageModifier'" id="DamageModifier" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="HealthModifier">HealthModifier</label>
            <input [formControlName]="'HealthModifier'" id="HealthModifier" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="ManaModifier">ManaModifier</label>
            <input [formControlName]="'ManaModifier'" id="ManaModifier" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="ArmorModifier">ArmorModifier</label>
            <input [formControlName]="'ArmorModifier'" id="ArmorModifier" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="ExperienceModifier">ExperienceModifier</label>
            <input formControlName="ExperienceModifier" id="ExperienceModifier" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="speed_walk">speed_walk</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Controls how fast the creature can walk. For vehicles it increases the flying speed.'"
            ></i>
            <input [formControlName]="'speed_walk'" id="speed_walk" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="speed_run">speed_run</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Controls how fast the creature can run. For vehicles it increases ground movement speed.'"
            ></i>
            <input [formControlName]="'speed_run'" id="speed_run" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="detection_range">detection_range</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Controls the range at which creatures detect and see players.'"
            ></i>
            <input [formControlName]="'detection_range'" id="detection_range" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      </div>

      <!-- <div class="content-block">
      <span class="category-title">
        Spells <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="SPELLS_TOOLTIP"></i>
      </span>
        <div class="row">

          <div
            *ngFor="let i of [1,2,3,4,5,6,7,8]"
            class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2"
          >
            <label class="control-label" for="spell{{ i }}">spell{{ i }}</label>
            <keira-spell-selector-btn
              [control]="editorService.form.controls['spell' + i]"
              [config]="{ name: 'spell' + i }"
              [modalClass]="'modal-lg'"
            ></keira-spell-selector-btn>
            <input [formControlName]="'spell' + i" id="spell{{ i }}" type="number" class="form-control form-control-sm">
          </div>

        </div>
      </div> -->
    </form>
  </div>
</div>
